<template>
	<div>
		<!--负载均衡 转发 列表-->
		
		<listTable
			ref="listTable"
			v-if="listOption" 
			:options="listOption"
			@command="listCommand"
			></listTable>
			
	</div>
</template>

<script>
//import { zhuanfaStatusFilter } from '@/filters/status/index';
import { appStatusFilter } from '@/filters/status/index';
import { tmplTypeFilter } from '@/filters/type/index';

import listTable from "@/view/components/table/listTable";
import { apiUrls, getAppInstList , getInstStatus } from "@/service/swagger/AcAppInstController"
import {start,stop,destroy,deleteSL} from "@/service/swagger/InstanceController";

import {listenner} from "@/utils/statuslistener" ;

export default {
	props: [
		"options"
	],
	components: {
		listTable,
	},
	data() {
		return {
      appType:this.$route.query.appType,
			listOption: {
				noPage: false,
				// 列表api
				listApi: {
					serviceFN: getAppInstList,
					params: {
						templateType: "",
						deployType: "",
						templateId :this.options.params.templateId,
						pageSize :this.options.params.pageSize,
						pageNum :this.options.params.pageNum,
					},
				},
				// 表头设置
				header: [{
					label: "实例名称",
					align: "left",
					html: (row) => {
						return `<span class="blue">${row.instName}</span>`
					},
					commandName: "goDetail",
				}, {
					label: "主机IP",
					html : (row)=>{
						const ip = row.hostsInfo[0]&&row.hostsInfo[0].ip ? row.hostsInfo[0].ip : "";
						return ip
					}
					//propName: "containerClusterName",
				},{
					label: "版本号",
					propName: "appVersion",
				},{
					label: "应用类型",
					html: (row) => {
						return tmplTypeFilter(row.deployType);
					},
				}, {
					label: "应用名",
					propName: "appName",
				},{
					label: "创建时间",
					propName: "createTime",
				}, {
					label: "状态",
					html:(row)=>{
						return appStatusFilter(row.status,row.expectStatus);
					}
				},{
					label: "操作",
					//width: "180px",
					btns: [{
						label: "详情",
						commandName: "goDetail",
					},{
						label: "停止",
						commandName: "stopSL",
						show: (row) =>{
							return row.status == 1;
						}
					},{
						label: "启动",
						commandName: "startSL",
						show: (row) =>{
							return row.status == 2;
						}
					},{
						label: "销毁",
						commandName: "destroySL",
						show: (row) =>{
							return row.status == 2;
						}
					},{
						label: "删除",
						commandName: "deleteSL",
						show: (row) =>{
							return row.status == 4;
						}
					},],
					btnGroups: []
				}]
			}
		}
	},
	mounted() {
		
		if(this.options&&this.options.params){
			Object.assign(this.listOption.listApi.params,this.options.params)
		}
		
		this.search();
	},
	methods: {
		listCommand(command, row, index) {
			if (command && this[command]) {
				this[command](row, index);
			}
		},
		refresh(id){
			if(id){
				this.search({
					templateId : id ,
				})
			}else{
				this.search();
			}
		},
		initData(_data){
			this.$refs.listTable.serviceCallBack({
				data : _data
			})
		},
		search(params) {
			if (this.$refs.listTable) {
				this.$refs.listTable.search(params)
			}
		},
		
		listLoaded(tableData){
			console.log("页面列表 search 完成", tableData);
			const statusStatic = (status) => {
				// 是否是稳定状态
				const isStatic = !(appStatusFilter(status).indexOf("...") > -1);
				return isStatic;
			}
			let unStaticArr = [];
			// 添加  status 监听
			tableData.forEach(el => {
				if (!statusStatic(el.status)) {
					unStaticArr.push(el.instId)
				}
			});
			if (unStaticArr && unStaticArr.length) {
				listenner({
					api: {
						serviceFN: getInstStatus,
						params: unStaticArr,
					},
					callBack: (ret) => {
						let hasAllStatusStaticed = true;
						ret.data.forEach(data => {
							if (!statusStatic(data.status)) {
								hasAllStatusStaticed = false;
							}
							tableData.forEach(el => {
								if (data.instId == el.instId) {
									el.status = data.status;
								}
							});
						});
						this.initData(tableData)
						return hasAllStatusStaticed;
					},
				}, this)
			}
		},
		
		// 停止
		stopSL(row,index){
			this.$confirm(`此操作将停止该运行实例, 是否继续?`, "停止实例", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
      	stop({
      		id: row.instId
      	}).then(ret=>{
        	this.refresh()
        })
      });
		},
		// 启动
		startSL(row,index){
			start({
      	id: row.instId
      }).then(ret=>{
      	this.refresh()
      })
		},
		goDetail(row, index) {
			// 跳转实例详情
			if(this.appType == 'yingyong'){
					this.$router.push({
					path:'/sl/yydetail',
					query: {
							appType: 'yingyong',
							id: row ? row.instId : '',
							instConf: row.instConf,
						}
				})
			}else{
				this.$router.push({
					path:'/sl/zjdetail',
					query: {
							appType: 'yingyong',
							id: row ? row.instId : '',
							instConf: row.instConf,
						}
				})
			}
			
		},
		// 销毁
		destroySL(row, index) {
			this.$confirm("确定销毁该容器？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
				.then(() => {
					destroy(row.instId).then(ret=>{
						this.refresh()
					})
				})
		},
		// 删除
		deleteSL(row, index) {
			this.$confirm("确定删除该容器？", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				})
			.then(() => {
				deleteSL(row.instId).then(ret => {
					if (ret && ret.code == 0) {
					this.refresh()
					this.$message({showClose: true,message: '删除成功！',type: 'success'})
					}
				})
			})
		}

	}

}
</script>

<style>
</style>